<div id="workflow-modal-dialog" style="display: none;">
    <div class="WorkflowMaker-deleteOverlay" ng-show="deleteOverlayVisible">
        <div class="modal-dialog">
            <div class="Modal-content modal-content">
                <div class="Modal-header">
                    <div class="Modal-title">
                        <span>{{strings.get('DELETE')}}</span>
                        <span class="Modal-titleResourceName" ng-bind="nodeToBeDeleted.unifiedJobTemplate.name"></span>
                    </div>
                    <div class="Modal-exitHolder">
                        <button aria-label="{{'Close'|translate}}" class="close Modal-exit" ng-click="cancelDeleteNode()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                <div class="Modal-body ng-binding">
                    <div class="Prompt-bodyQuery">{{strings.get('workflow_maker.DELETE_NODE_PROMPT_TEXT')}}</div>
                </div>
                <div class="Modal-footer">
                    <button ng-click="cancelDeleteNode()" class="btn Modal-defaultButton Modal-footerButton">{{strings.get('CANCEL')}}</button>
                    <button ng-click="confirmDeleteNode()" class="btn Modal-footerButton ng-binding Modal-errorButton">{{strings.get('DELETE')}}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="WorkflowMaker-unsavedChangesOverlay" ng-show="unsavedChangesVisible">
        <div class="modal-dialog">
            <div class="Modal-content modal-content">
                <div class="Modal-header">
                    <div class="Modal-title">
                        <span>{{strings.get('workflow_maker.UNSAVED_CHANGES_HEADER')}}</span>
                    </div>
                    <div class="Modal-exitHolder">
                        <button aria-label="{{'Cancel unsaved changes'|translate}}" class="close Modal-exit" ng-click="cancelUnsavedChanges()">
                            <i class="fa fa-times-circle"></i>
                        </button>
                    </div>
                </div>
                <div class="Modal-body ng-binding">
                    <div class="Prompt-bodyQuery">{{strings.get('workflow_maker.UNSAVED_CHANGES_PROMPT_TEXT')}}</div>
                </div>
                <div class="Modal-footer">
                    <button ng-click="closeDialog(true)" class="btn Modal-footerButton Modal-errorButton">{{strings.get('workflow_maker.EXIT')}}</button>
                    <button ng-click="cancelUnsavedChanges()" class="btn Modal-footerButton Modal-defaultButton">{{strings.get('workflow_maker.CANCEL')}}</button>
                    <button
                        ng-hide="formState.showNodeForm || formState.showLinkForm"
                        ng-click="saveWorkflowMaker()"
                        class="btn Modal-footerButton btn-success"
                    >
                        {{strings.get('workflow_maker.SAVE_AND_EXIT')}}
                </button>
                </div>
            </div>
        </div>
    </div>
    <div class="WorkflowMaker-header">
        <div class="WorkflowMaker-title">
            <div class="WorkflowMaker-titleText">{{strings.get('workflow_maker.TITLE')}} | {{ workflowJobTemplateObj.name }}</div>
        </div>
        <div class="WorkflowMaker-exitHolder">
            <button aria-label="{{'Close'|translate}}" class="WorkflowMaker-exit" ng-click="closeDialog()">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
    </div>
    <div class="WorkflowMaker-contentHolder">
        <div class="WorkflowMaker-contentLeft">
            <div class="WorkflowLegend-maker">
                <div class="WorkflowLegend-maker--left">
                    <i ng-class="{{ keyClassList }}" class="fa fa-compass Key-menuIcon" ng-click="toggleKey()"></i>
                    <workflow-key ng-show="showKey"></workflow-key>
                </div>
                <div class="WorkflowLegend-maker--right">
                    <span class="WorkflowMaker-totalJobs">{{strings.get('workflow_maker.TOTAL_NODES')}}</span>
                    <span class="badge List-titleBadge" ng-bind="graphState.arrayOfNodesForChart.length === 0 ? graphState.arrayOfNodesForChart.length : graphState.arrayOfNodesForChart.length-1"></span>
                    <i ng-class="{'WorkflowMaker-manualControlsIcon--active': showManualControls}" class="fa fa-cog WorkflowMaker-manualControlsIcon" aria-hidden="true" alt="Controls" ng-click="toggleManualControls()"></i>
                    <div ng-show="showManualControls" class="WorkflowMaker-manualControls noselect">
                        <workflow-controls class="WorkflowControls" pan-chart="panChart(direction)" zoom-chart="zoomChart(zoom)" reset-chart="resetChart()" zoom-to-fit-chart="zoomToFitChart()"></workflow-controls>
                    </div>
                </div>
            </div>
            <workflow-chart
                ng-if="modalOpen"
                graph-state="graphState"
                add-node-without-child="startAddNodeWithoutChild(parent)"
                add-node-with-child="startAddNodeWithChild(link)"
                edit-node="startEditNode(nodeToEdit)"
                edit-link="startEditLink(linkToEdit)"
                select-node-for-linking="selectNodeForLinking(nodeToStartLink)"
                delete-node="startDeleteNode(nodeToDelete)"
                workflow-zoomed="workflowZoomed(zoom)"
                read-only="readOnly"
                mode="edit"
                class="WorkflowMaker-chart">
            </workflow-chart>
        </div>
        <div class="WorkflowMaker-contentRight">
            <span ng-if="formState.showNodeForm">
                <workflow-node-form node-config="nodeConfig" workflow-job-template-obj="workflowJobTemplateObj" select="confirmNodeForm(nodeFormData)" cancel="cancelNodeForm()" read-only="!workflowJobTemplateObj.summary_fields.user_capabilities.edit"/>
            </span>
            <span ng-if="formState.showLinkForm">
                <workflow-link-form link-config="linkConfig" read-only="!workflowJobTemplateObj.summary_fields.user_capabilities.edit" select="confirmLinkForm(edgeType)" cancel="cancelLinkForm()" unlink="unlink()"/>
            </span>
        </div>
    </div>
    <div class="WorkflowMaker-buttonHolder">
        <button type="button" class="btn btn-sm WorkflowMaker-cancelButton" ng-click="closeDialog()"> {{:: strings.get('CLOSE') }}</button>
        <button type="button" class="btn btn-sm WorkflowMaker-saveButton" ng-click="saveWorkflowMaker()" ng-show="workflowJobTemplateObj.summary_fields.user_capabilities.edit || canAddOrEdit" ng-disabled="formState.showNodeForm || formState.showLinkForm"> {{:: strings.get('SAVE') }}</button>
    </div>
</div>
